<template>
  <view class="event-detail-wrapper h-100% bg-gray-1">
    <block v-if="stageInfo">
      <Round v-if="pageType === 'round'" :stageInfo="stageInfo"></Round>
      <Elimination v-else :stageInfo="stageInfo"></Elimination>
    </block>
  </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import Round from './component/round.vue'
import Elimination from './component/elimination.vue'
import { getStageMatchesByStageId } from '@/service/stage'

const pageType = ref('')
const stageInfo = ref(null)

onLoad(async (option: { type: string; id: string }) => {
  pageType.value = ['none', 'elimination', 'round'][parseInt(option.type)]
  const stage = (await getStageMatchesByStageId(option.id)).data
  // stages[0].players = eventToPlayers
  stageInfo.value = stage
})

// const pageType = ref('elimination')
</script>
<style lang="scss">
.event-detail-wrapper {
  :deep() {
    .is-active .wd-segmented__item-label {
      color: #3b6eff;
    }
  }
}
</style>
